<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../笔记/jquery/jquery-3.4.1.js"></script>
</head>
    <style>
        form{
            display: inline-block;
        }
        select{
            width:140px;
            overflow: hidden;
            
        }
    </style>
<body>
    <div>
        <form action="">省：<select name="省" id="s1">--请选择--</select></form>
        <form action="">市：<select name="市" id="s2"></select></form>
        <form action="">区：<select name="区" id="s3"></select></form>
    </div>
    <script>
        // let xhr=new XMLHttpRequest();
        // xhr.open('get','http://zhouxunwang.cn/data/?id=104&key=B7rF/oI0G9X+h5KN+4oyQG7HOgTgsJeZ/pxz7fk&ske=1',true);
        // xhr.send()
        // xhr.onload= function(){
        //     let jsonData=JSON.parse(xhr.responseText);
        //     let res=jsonData.result;
        //     //console.log(res);
        //     prov1=`<option value='0'>${res[0].province}</option>`;         
        //     for(let i=1;i<res.length;i++){
        //         $('#s1').html(prov1+=`<option value='${i}'>${res[i].province}</option>`)
        //         }
        //     $('#s1').click(function(){
        //         var prov=$('#s1').val();
        //         var citys=res[prov].city
        //         cityy=`<option value='0'>${citys[0].city}</option>`
        //         $('#s2').html(cityy)
        //         for(let i=1;i<citys.length;i++){
        //             $('#s2').html(cityy+=`<option value='${i}'>${citys[i].city}</option>`)
        //         }
        //     })
        //     $('#s2').click(function(){
        //         //var prov=$('#s1').val();
        //         var prov=$('#s1').val();
        //         var cit=$('#s2').val();
        //         var citys=res[prov].city
        //         var distr=citys[cit].district
        //         distri=`<option value='0'>${distr[0].district}</option>`
        //         for(let i=1;i<distr.length;i++){
        //             $('#s3').html(distri+=`<option value='${i}'>${distr[i].district}</option>`)
        //         }
        //     })
        // }
        var province;
        province()
        function province(){
            $.ajax({
            url:'http://zhouxunwang.cn/data/?id=104&key=B7rF/oI0G9X+h5KN+4oyQG7HOgTgsJeZ/pxz7fk&ske=1',
            async: ture,
            dataType:'json',
            success:function(res){
                province=res.result;
                for(let i=0;i<province.length;i++){
                    $('#s1').append(`<option value='${i}'>${province}</option>`)
                }
            }
        
            })
        }
        var city;
        $('#s1').change(function(){
            $('#s2').empty();
            $('#s3').empty();
            let id=$('#s1').val();
            for(let i=0;i<province.length;i++){
                if(id==province[i].id){
                    city=province[i].city;
                }
            }
            for(let i=0;i<city.length;i++){
                $('#s2').append(`<option value='${i}'>${city}</option>`)
            }
        })
        var district;
        $('#s2').change(function(){
            $('#s2').empty();
            $('#s3').empty();
            let id=$('#s2').val();
            for(let i=0;i<city.length;i++){
                if(id==city[i].id){
                    district=city[i].district;
                }
            }
            for(let i=0;i<district.length;i++){
                $('#s2').append(`<option value='${i}'>${district}</option>`)
            }
        })
    </script>
</body>
</html>